<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function addNode(){
				//获得表单对象
				var fom = document.getElementById("fom");
				//创建节点的方法
				var p =document.createElement("p");
				p.innerText="照片：";
				var inp =document.createElement("input");
				//给属性
				inp.type="file";
				var inp2 = document.createElement("input");
				inp2.type="button";
				inp2.value="删除";
				
				inp2.onclick=function(){
					//移除子节点
					p.removeChild(inp);
					p.removeChild(inp2);
					//移除本身
					p.remove();
;				}
				//添加节点   在form表单中添加
				//会添加在表单后  appendChild
				//fom.appendChild(p);
				/*p.appendChild(inp);
				p.appendChild(inp2);*/
				
				//获得最后节点
				var lastNode=document.getElementById("lastNode");
				//在指定元素之前添加节点        添加的元素，添加到哪个之前
				fom.insertBefore(p,lastNode);
				p.appendChild(inp);
				p.appendChild(inp2);
			}
		</script>
	</head>
	<body>
		<form action="" id="fom">
			<p>
				用户名：<input type="text" name="" id="" value="" />
			</p>
			<p>
				照片：<input type="file" />
				<input type="button" name="" id="" value="添加" onclick="addNode()"/>
			<p id="lastNode">
				<input type="button" name="" id="" value="提交" />
				<input type="button" name="" id="" value="清空" />
			</p>
		</form>
	</body>
</html>
